<!--
 * @Author: 关棺 3156298705@qq.com
 * @Date: 2024-12-19 17:12:51
 * @LastEditors: 关棺 3156298705@qq.com
 * @LastEditTime: 2024-12-19 18:48:49
 * @FilePath: \supervision-ui\src\views\pop\pop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="400px"
    append-to-body
    :style="popupStyle"
    @close="handleClose"
  >
    <el-form ref="form" :model="message" label-width="80px">
      <el-form-item label="发送人" prop="name">
        <el-input disabled v-model="message.name" placeholder="请输入文件名称" />
      </el-form-item>
      <el-form-item label="发送内容" prop="data">
        <el-input disabled v-model="message.data" />
      </el-form-item>
    </el-form>
    <div style="margin-top: 10px; flex: 1; display: flex; justify-content: center;">
      <!-- 发送消息按钮 -->
      <el-button type="primary" @click="showInputDialog">发送消息</el-button>
      <!-- 关闭弹窗按钮 -->
      <el-button type="danger" @click="handleClose">关闭</el-button>
    </div>
    <!-- 引入 InputDialog 组件 -->
    <InputDialog ref="inputDialog" @confirm="handleSendMessage" />
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { informationWebSocket } from "@/api/system/push.js";
import InputDialog from "./InputDialog.vue"; // 引入 InputDialog 组件
export default {
  name: "FileUploadDialog",
  components: { InputDialog }, // 注册 InputDialog 组件
  props: {
    title: {
      type: String,
      default: "消息内容",
    },
    message: {
      type: Object,
    },
    index: {
      type: Number,
      required: true,
    },
  },
  computed: {
    ...mapState({
      user: state => state.user,
    }),
    popupStyle() {
      return {
        position: 'fixed',
        top: `${20 + this.index * 30}px`, // 每个弹窗的垂直间距
        left: `${200 + this.index * 30}px`, // 每个弹窗的水平间距
        zIndex: 1000 + this.index, // 通过 index 控制弹窗层级
      };
    },
  },
  data() {
    return {
      open: true, // 默认打开
    };
  },
  methods: {
    handleClose() {
      this.open = false;
      this.$emit("close"); // 通知父组件关闭当前弹窗
    },
    showInputDialog() {
      this.$refs.inputDialog.open(); // 打开 InputDialog
    },
    async handleSendMessage(data) {
      // 调用后端接口发送消息
      await informationWebSocket({
        id: this.user.user.userId,
        name: this.user.user.userName,
        collectId: this.message.id,
        collectName: this.message.collectName,
        data: data, // 使用用户输入的内容
      });
      this.open = false; // 关闭当前弹窗
    },
  },
};
</script>